<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载插件</title>
</head>

<body>
    <img class='tupian'
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=603481629,357497039&fm=26&gp=0.jpg" alt=""
        data-img='./img/1.jpg' width='640' height='420' />
    <hr>
    <img class='tupian'
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=603481629,357497039&fm=26&gp=0.jpg" alt=""
        data-img='./img/2.jpg' width='640' height='420'/>
    <hr>
    <img class='tupian'
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=603481629,357497039&fm=26&gp=0.jpg" alt=""
        data-img='./img/3.jpg' width='640' height='420'/>
    <hr>
    <img class='tupian'
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=603481629,357497039&fm=26&gp=0.jpg" alt=""
        data-img='./img/4.jpg' width='640' height='420'/>
    <hr>
    <img class='tupian'
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=603481629,357497039&fm=26&gp=0.jpg" alt=""
        data-img='./img/5.jpg' width='640' height='420'/>


    <script>
        let t=null
        function fn(){
            if(t) clearTimeout(t)

            t=setTimeout(()=>{
                console.log('fn');

                let windowH=window.innerHeight || document.documentElement.clientHeight
                let scrollH=document.body.scrollTop || document.documentElement.scrollTop
                let showH=windowH+scrollH

                let imgs=document.querySelectorAll('img')

                for(let i=0;i<imgs.length;i++){
                    if(imgs[i].offsetTop<showH){
                        imgs[i].src=imgs[i].getAttribute('data-img')
                    }
                }
            },100)
        }
        fn()
        window.onscroll=fn
    </script>
</body>

</html>